<template>
    <div class="change-phone-content">
            <div class="contentss" slot="content">
                <i-form :label-width="100">
                    <form-item label="手机号">
                        <div class="form-is">
                        <i-input type="password" placeholder="请输入手机号"></i-input><a href="javascript:;" @click="jump">收不到验证码</a>
                        </div>
                    </form-item>
                    <form-item label="验证码">
                        <i-input type="password" placeholder="请输入验证码">
                            <span slot="append">获取短信验证码</span>
                        </i-input>
                    </form-item>
                    <form-item label="新手机号">
                        <i-input type="password" placeholder="请输入新手机号"></i-input>
                    </form-item>
                    <form-item label="验证码">
                        <i-input type="password" placeholder="请输入验证码">
                            <span slot="append">获取短信验证码</span>
                        </i-input>
                    </form-item>
                </i-form>
                <div class="control-box">
                    <Button type="primary">确定</Button>
                    <Button>取消</Button>
                </div>
            </div>
    </div>
</template>
<script>
export default {
    name: 'changePhone',
    methods: {
        jump () {
            this.$router.push('/home/setting/verification-password')
        }
    }
}
</script>
<style lang="less" scoped>
.change-phone-content {
    height: 100%;
    .contentss {
        height: 100%;
        width: 60%;
        margin: 0 auto;
        padding-top: 90px;
        .control-box {
            padding: 60px 0 0 100px;
            button {
                margin-right: 12px;
            }
        }
    }
    .form-is {
        display:flex;
        a {
            width: 100px;
            margin-left: 10px;
            text-decoration: underline;
        }
    }
}
/deep/.change-password-content{
    height: 100%;
}
</style>